<template>
  <div>
    <el-divider></el-divider>
    <!-- <canvas style="border: 1px solid red" width="800" height="500"></canvas> -->
    <el-divider></el-divider>
    <!-- <div ref="bar" class="bar"></div> -->
    <el-divider></el-divider>
    <!-- <div ref="bar1" class="bar"></div> -->
    <el-divider></el-divider>
    <div ref="line" class="bar"></div>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  data() {
    return {
      yData1: [2, 4, 6, 0, 10, 0, 3],
      yData2: [2, 0, 3, 0, 12, 6, 7]
    }
  },
  created() {
    let def = ['aaa', 'bbb']
    this.$ls.set('name', def, 1000 * 5)
    console.log('home-------created------ls', this.$ls.set('name', def))

    // console.log('home-------created------', this.$LsyStorage)
    // console.log('home-------created')
    // let home = { name: 'aaaa' }
    let home = ['aaa', 'bbb']
    // window.localStorage.setItem('home', JSON.stringify(home))
    // console.log('home-------created', home, typeof (home))
    // console.log('home-------created', JSON.stringify(home), typeof (JSON.stringify(home)))

    let object3 = [
      { name: '小明', age: 10 },
      { name: '小红', age: 12 },
    ]
    console.log('object3----------', object3)
    console.log('object3----------', Object.keys(object3))
    Object.keys(object3).forEach((keys) => {
      console.log('object3----------', keys)
    })

    let aaa = []
    console.log('EEEEEEE', Boolean(aaa.length))
    if (aaa.length) {
      console.log('##########')
    }
  },
  mounted() {
    // this.getCanvas()
    // this.getBar() // 立体柱状图
    // this.getBar1() // 立体柱状图
    this.getLine() // 动态折线图
    // this.$ls.get('name')
    // console.log('home-------mounted------ls', this.$ls.get('name'), typeof (this.$ls.get('name')))

    // setTimeout(() => {
    //   console.log('home-------mounted------ls', this.$ls.get('name'), typeof (this.$ls.get('name')))
    // }, 1000 * 10)

    // console.log('home-------mounted')
    // let homeValue = window.localStorage.getItem('home')
    // console.log('home-------mounted', homeValue, typeof (homeValue))
    // console.log('home-------mounted', JSON.parse(homeValue), typeof (JSON.parse(homeValue)))
  },
  methods: {
    getCanvas() {
      // 1.拿到canvas
      let oCanvas = document.querySelector('canvas')
      // 2.从canvas中拿到绘图工具
      let oCtx = oCanvas.getContext('2d')
      oCtx.scale(1, 0.5)
      oCtx.arc(100, 100, 50, 0, 2 * Math.PI, false)
      // oCtx.scale(1, 0.5)
      oCtx.lineWidth = 5
      oCtx.strokeStyle = 'red'
      // oCtx.fill()
      oCtx.stroke()
    },
    getBar() {
      var echarts = require('echarts')
      var myChart = echarts.init(this.$refs.bar)
      var option = {}
      option = {
        // backgroundColor: 'rgba(17, 42, 62, 0.5)',
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'none' },
        },
        legend: {
          show: true,
          right: 0,
          itemWidth: 30,
          itemHeight: 10,
        },
        grid: { left: '3%', right: '5%', bottom: '8%', containLabel: true },
        yAxis: {
          type: 'value',
          name: '单位：万吨',
          nameTextStyle: { color: ' rgba(77,77,77,0.90)', fontSize: 16, padding: 0 },
          splitLine: {
            show: true,
            lineStyle: { color: '#666', type: 'dashed' },
          },
          axisLine: {
            lineStyle: { color: '#888' },
          },
          axisTick: { show: false },
          axisLabel: { color: '#000' },
        },
        xAxis: [
          {
            type: 'category',
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
            splitLine: {
              show: true,
              lineStyle: { color: '#666', type: 'dashed' },
            },
            axisLine: {
              lineStyle: { color: '#888' },
            },
            axisTick: { show: true },
            axisLabel: { color: '#000' },
          }
        ],
        series: [
          {
            name: '轮入计划',
            type: 'bar',
            barWidth: 24,
            barGap: '-1',
            data: [2, 4, 6, 8, 10, 3, 3],
            color: '#36b6f6',
            z: 10
            // zIndex: 10
          },
          {
            name: '轮入已执行',
            type: 'bar',
            barWidth: 24,
            // barGap: '-100%',
            data: [1, 6, 3, 4, 5, 6, 7],
            color: '#ffc241',
            z: 5
          }
        ],
      }
      myChart.setOption(option)
    },
    getBar1() {
      var echarts = require('echarts')
      var myChart = echarts.init(this.$refs.bar1)
      var option = {}
      // 绘制柱状图
      const CubeBar = echarts.graphic.extendShape({
        shape: { x: 0, y: 0 },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x + 12, shape.y]; // 右上角
          const c2 = [shape.x - 12, shape.y]; // 左上角
          const c3 = [xAxisPoint[0] - 12, xAxisPoint[1]]; // 左下角
          const c4 = [xAxisPoint[0] + 12, xAxisPoint[1]]; // 右下角
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
        }
      })
      // 注册柱状图
      echarts.graphic.registerShape('CubeBar', CubeBar)
      option = {
        // backgroundColor: 'rgba(17, 42, 62, 0.5)',
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'none' },
        },
        legend: {
          show: true,
          right: 100,
          itemWidth: 30,
          itemHeight: 10,
        },
        grid: { left: '3%', right: '5%', bottom: '8%', containLabel: true },
        yAxis: {
          type: 'value',
          name: '单位：万吨',
          nameTextStyle: { color: ' rgba(77,77,77,0.90)', fontSize: 16, padding: 0 },
          splitLine: {
            show: true,
            lineStyle: { color: '#666', type: 'dashed' },
          },
          axisLine: {
            lineStyle: { color: '#888' },
          },
          axisTick: { show: false },
          axisLabel: { color: '#000' },
        },
        xAxis: [
          {
            type: 'category',
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
            splitLine: {
              show: true,
              lineStyle: { color: '#666', type: 'dashed' },
            },
            axisLine: {
              lineStyle: { color: '#888' },
            },
            axisTick: { show: true },
            axisLabel: { color: '#000' },
          }
        ],
        series: [
          // 第一组数据
          {
            name: '轮入计划',
            type: 'custom',
            color: '#36b6f6',
            renderItem: (params, api) => {
              console.log('轮入计划------', api, api.value(0), api.value(1))
              const location = api.coord([api.value(0), api.value(1)])
              var color = (api.value(1) == 0) ? 'transparent' : '#36b6f6'
              return {
                type: 'group',
                children: [
                  {
                    type: 'CubeBar',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                      fill: color = (api.value(1) == 0) ? 'transparent' : '#36b6f6',
                      stroke: api.value(1) == 0 ? 'transparent' : '#999',
                      lineWidth: 1
                    }
                  }
                ]
              }
            },
            data: this.yData1,
          },
          // 第二组数据
          {
            name: '轮入已执行',
            type: 'custom',
            color: '#ffc241',
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)])
              var color = (api.value(1) == 0) ? 'transparent' : '#ffc241'
              return {
                type: 'group',
                children: [
                  {
                    type: 'CubeBar',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: this.yData1[api.value(0)] <= this.yData2[api.value(0)] ? api.coord([api.value(0), this.yData1[api.value(0)]]) : api.coord([api.value(0), 0])
                    },
                    style: {
                      fill: color = (api.value(1) == 0) ? 'transparent' : '#ffc241',
                      stroke: api.value(1) == 0 ? 'transparent' : '#999',
                      lineWidth: 1
                    }
                  }
                ]
              }
            },
            data: this.yData2,
          }
        ],
      }
      myChart.setOption(option)
    },
    getLine() {
      let datas = []
      let now = new Date(2024, 4, 11, 0)
      let oneDay = 1000 * 60 * 60
      function randomData(i) {
        console.log('DDDDDDDD', now)
        now = new Date(+now + oneDay)
        return {
          name: now.toString(),
          value: [now, (i * 0.1).toFixed(1)],
        }
      }
      for (var i = 0; i < 5; i++) {
        datas.push(randomData(i + 1))
      }
      console.log('VVVVVv', datas)
      let dataZoom = [
        {
          show: true,
          type: 'slider',
          filterMode: 'none',
          xAxisIndex: [0],
          start: 80,
          end: 100,
        }
      ]
      var echarts = require('echarts')
      var myChart = echarts.init(this.$refs.line)
      var option = {}
      option = {
        // backgroundColor: 'rgba(17, 42, 62, 0.5)',
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'none' },
        },
        legend: {
          show: true,
          right: 0,
          itemWidth: 30,
          itemHeight: 10,
        },
        grid: { left: '3%', right: '5%', bottom: '8%', containLabel: true },
        yAxis: {
          type: 'value',
          name: '单位：万吨',
          nameTextStyle: { color: ' rgba(77,77,77,0.90)', fontSize: 20, padding: 5 },
          splitLine: {
            show: true,
            lineStyle: { color: '#666', type: 'dashed' },
          },
          axisLine: {
            lineStyle: { color: '#888' },
          },
          axisTick: { show: false },
          axisLabel: {
            textStyle: { fontSize: 20 }
          },
        },
        xAxis: [
          {
            type: 'time',
            // data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
            splitLine: {
              show: true,
              lineStyle: { color: '#666', type: 'dashed' },
            },
            axisLine: {
              onZero: false,
              lineStyle: { color: '#888' },
            },
            // axisTick: { show: true },
            axisLabel: {
              showMaxLabel: true, //强制显示最后一个数据的刻度
              textStyle: { fontSize: 20, padding: 10 },
              interval: 0,
              formatter: function (params) {
                // let date = moment()
                console.log('########3', params)
                // let month = date.get('month') + 1
                // let day = date.get('date')
                // let hour = date.get('hour')
                let date = new Date(params)
                // console.log('########3', params, date)
                let month = date.getMonth()
                let day = date.getDate()
                let hour = date.getHours()
                // let miu = date.getMinutes()
                // let sec = date.getSeconds()
                return (
                  month + '月' + day + ' ' + hour + '时'
                )
              }
            }
          }
        ],
        series: [
          {
            name: '轮入计划',
            type: 'line',
            // showSymbol: false,
            // barWidth: 24,
            // barGap: '-1',
            // data: [2, 4, 6, 8, 10, 3, 3],
            itemStyle: {
              normal: {
                color: '#003366',
                lineStyle: { color: '#003366' },
                label: { show: true, fontSize: 20 }
              }

            },
            symbol: 'star',
            symbolSize: 10,
            // markPoint: {
            //   symbolSize: 80,
            //   itemStyle: {
            //     normal: {
            //       label: {
            //         show: true,
            //         fontSize: 15
            //       }
            //     }
            //   }
            // },
            data: datas,
            // color: '#36b6f6',
            // z: 10
            // zIndex: 10
          },
          // {
          //   name: '轮入已执行',
          //   type: 'line',
          //   barWidth: 24,
          //   // barGap: '-100%',
          //   data: [1, 6, 3, 4, 5, 6, 7],
          //   color: '#ffc241',
          //   z: 5
          // }
        ],
      }
      myChart.setOption(option)


      setInterval(function () {
        // console.log('FFFFFF', datas)
        // console.log('FFFFFF', datas[datas.length - 1])
        let i = datas[datas.length - 1].value[1] / 0.1 + 1
        // console.log('FFFFFF', i)
        datas.push(randomData(i))
        myChart.setOption({
          series: [
            { data: datas }
          ],
          // dataZoom,
        })
      }, 10000)
    }


  },
  activated() {
    console.log('home-------activated')
  },
  deactivated() {
    console.log('home-------deactivated')
  },
}
</script>

<style>
.bar {
  width: 100%;
  height: 400px;
  border: 1px solid red;
}
</style>
